<template>
	<div class="app-container">
		<el-row>
  			<el-col :span="8">
  				<div class="grid-content bg-purple">
  					<!--<template slot-scope="scope">-->
						<el-input v-model="searchSort"  placeholder="请输入序号查找"></el-input>
					<!--</template>-->
  				</div>
  			</el-col>
  			<el-col :span="8">
  				<div class="grid-content bg-purple-light">
  					<el-button @click="search">查找</el-button>
  				</div>
  			</el-col>
	 	 </el-row>

		<el-table :data="tableData" style="width: 100%">
			<el-table-column  label="序号" >
				<template slot-scope="scope">
					{{scope.row.number}}
				</template>

			</el-table-column>
			<el-table-column  label="姓名">
				<template slot-scope="scope">
					{{scope.row.name}}
				</template>

			</el-table-column>
			<el-table-column  label="省市">

					<template slot-scope="scope">
					{{scope.row.province}}
				</template>
			</el-table-column>
			<el-table-column  label="单位" >
					<template slot-scope="scope">
					{{scope.row.company}}
				</template>

			</el-table-column>
			<el-table-column  label="联系电话" >
					<template slot-scope="scope">
					{{scope.row.phone}}
				</template>

			</el-table-column>
			<el-table-column  label="性别" >
					<template slot-scope="scope">
					{{scope.row.sex}}
				</template>

			</el-table-column>
			<el-table-column  label="操作" width="180">
				<template slot-scope="scope">
					<el-button type="primary" @click="edit(scope.row)">编辑</el-button>
				</template>
			</el-table-column>

		</el-table>

		<el-dialog title="修改人员信息" :visible.sync="dialogFormVisible">
			<el-form :model="person">
				<el-form-item label="序号" :label-width="formLabelWidth">
					<el-input v-model="person.number" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth">
					<el-input v-model="person.name" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="联系方式" :label-width="formLabelWidth">
					<el-input v-model="person.phone" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="省市" :label-width="formLabelWidth">
					<el-input v-model="person.province" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="单位" :label-width="formLabelWidth">
					<el-input v-model="person.company" autocomplete="off"></el-input>
				</el-form-item>


				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-select v-model="person.sex"  placeholder="性别">
	        			<el-option label="男" value="男"></el-option>
	        			<el-option label="女" value="女"></el-option>
	      			</el-select>
      			</el-form-item>


			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</div>
		</el-dialog>

		<el-row style="text-align: right; margin-right: 10px;">
			<div class="grid-content bg-purple-light">
				<el-pagination
					 @current-change="handleCurrentChange"
					 :current-page.sync="currenPage"
					 :page-size="pageSize"
					 layout="total, prev, pager, next"
					 :total="total">
				</el-pagination>

			</div>
		</el-row>

	</div>
</template>

<script>

	import { getExamineeList,updateExaminee } from '@/api/table'
	export default {
		data() {
			return {
				tableData: [],
				pageSize:10,
				currenPage:1,
				total:0,//总页数
				searchSort:null,
				dialogFormVisible:false,
				formLabelWidth: '120px',
				person:{
					  number:null,
    				 name:null,
    				 province:null,
   					 company:null,
    			  	 phone:null,
   					 sex:null

				},//
			}
		},
		methods:{
			fetchData(){
				this.listLoading = true
				getExamineeList(this.currenPage,this.pageSize,this.searchSort).then(response=>{
					if(response.code==200){
						this.listLoading = false
						this.tableData=response.data.list
						this.total=response.data.total
						this.currenPage=response.data.pageNum
					}else{
						this.listLoading = false
						this.$message.error('请求数据失败');
					}
				})
			},
			handleCurrentChange(e) {
				this.currenPage = e
				this.fetchData()
			},
			/*查找方法*/
			search(){
				this.currenPage=1
				this.fetchData()
			},
			/*点击编辑方法*/
			edit(e){
				this.person=e
				this.dialogFormVisible=true
			},
			/*更新人员信息方法*/
			update(){
				console.log(this.person)

				updateExaminee(this.person).then(response=>{
					if(response.data){
							this.$message({
							message: '修改成功',
							type: 'success'
						});

						this.dialogFormVisible=false
					}


				})
				//console.log(this.person)

			}
   },
		created(){
			this.fetchData()
		},

		watch: {
     	 	searchSort(val) {
     	 	this.currenPage=1
      		this.fetchData()
      			}
     	 	}
	}
</script>

<style>

	.el-table td, .el-table th{
		text-align: center;
	}

</style>
